<template>
    <div class="list">
        <li>
            <transition-group 
                name="animate__animated animate__bounce"
                enter-active-class="animate__flipInX"
                leave-active-class="animate__fadeOutUp"
            >
                <Item 
                    v-for="todoObj in todoList" 
                    :key="todoObj.id" 
                    :todo="todoObj"
                />
            </transition-group>
        </li>
        <Bottom 
            :todoList="todoList" 
        />
    </div>
</template>

<script>
import 'animate.css'
import Item from './Item.vue'
import Bottom from './Bottom.vue'

    export default {
        name:"List",
        components:{Item,Bottom},
        props:['todoList'],
        
    }
</script>

<style>
    .list{
        list-style-type: none;
        position: relative;
        top:90px;
        left:190px;
        width: 400px;
    }
</style>